import React, { Component } from 'react';
import { good_hotsearch } from "../api/index";
import "../styles/mysearch.css";
import { NavBar } from 'antd-mobile'
class Search extends Component {
    constructor(props) {
        super(props);
        this.state = {
            hotlist: [],
            inputvalue: ''
        }
    }
    componentDidMount() {
        document.addEventListener('keydown', this.onkeydown)
        good_hotsearch().then((res) => {
            console.log(res.data.list)
            this.setState({
                hotlist: res.data.list
            })
        })
    }
    tosearch(e) {
        console.log(e.target.value)
        this.setState({
            inputvalue: e.target.value
        })
        this.props.history.push({ pathname: '/index/ProductPage' })
    }
    goxxx(){
        this.props.history.go(-1);
    }
    render() {
        return (
            <div className='search'>
                <div className='top'>
                    <NavBar onBack={() => { this.goxxx() }}>搜索</NavBar>
                </div>
                <div className='inputbox'>
                    <input type="text" value={this.state.inputvalue}
                        onChange={(e) => { this.tosearch(e) }}
                        placeholder='搜索商品' /></div>
                <div className='hot'>
                    <p>最近搜索</p>
                    <div className='hotlist'>
                        <div className='p' >
                            sk2
                        </div>
                        <div className='p' >
                            sk
                        </div>
                        <div className='p' >
                            s
                        </div>
                    </div>
                </div>
                <div className='hot'>
                    <p>热门搜索</p>
                    <div className='hotlist'>
                        {
                            this.state.hotlist.map((item, inex) => {
                                return (
                                    <div className='p' onClick={(e) => {
                                        this.searchClick(item, e)
                                    }} key={item}>
                                        {item}
                                    </div>
                                )
                            })
                        }
                    </div>
                </div>
            </div>

        );
    }
}

export default Search;